<template>
	<view class="translate">
		<view class="card-item bg1">
			<view class="Identification">周</view>
			<view class="title">本周副本次数：{{ countWeek.recordCount }}</view>
			<view class="flex-row-btw">
				<view class="content-item">
					<view>工资：<goldVue color="#fff" :money="countWeek.totalCopyWages / jinBL"></goldVue></view>
					<view>消费：<goldVue color="#fff" :money="countWeek.totalCopyUse / jinBL"></goldVue></view>
				</view>
				<view class="content-item">
					<view>玄晶：{{ countWeek.totalXuanJing }}</view>
					<view>特殊：{{ countWeek.totalSpecial }}</view>
				</view>
			</view>
		</view>
		<view class="card-item bg2">
			<view class="Identification">月</view>
			<view class="title">本月副本次数：{{ countMonth.recordCount }}</view>
			<view class="flex-row-btw">
				<view class="content-item">
					<view>工资：<goldVue color="#fff" :money="countMonth.totalCopyWages / jinBL"></goldVue></view>
					<view>消费：<goldVue color="#fff" :money="countMonth.totalCopyUse / jinBL"></goldVue></view>
				</view>
				<view class="content-item">
					<view>玄晶：{{ countMonth.totalXuanJing }}</view>
					<view>特殊：{{ countMonth.totalSpecial }}</view>
				</view>
			</view>
		</view>
		<view class="card-item bg3">
			<view class="Identification">总</view>
			<view class="title">总副本次数：{{ countTotal.recordCount }}</view>
			<view class="flex-row-btw">
				<view class="content-item">
					<view>工资：<goldVue color="#fff" :money="countTotal.totalCopyWages / jinBL"></goldVue></view>
					<view>消费：<goldVue color="#fff" :money="countTotal.totalCopyUse / jinBL"></goldVue></view>
				</view>
				<view class="content-item">
					<view>玄晶：{{ countTotal.totalXuanJing }}</view>
					<view>特殊：{{ countTotal.totalSpecial }}</view>
				</view>
			</view>
		</view>
		
		<view class="more-btn" @click="toCopyRecord">
			<uv-button type="primary">更多记录</uv-button>
		</view>
	</view>
</template>

<script>
	import { jinBL } from '../../../utils/const.js'
	import goldVue from '@/components/gold/gold.vue'
	export default {
		components: {
			goldVue,
		},
		data() {
			return {
				jinBL: jinBL,
				countWeek: {
					recordCount: 0,
					totalCopyUse: 0,
					totalCopyWages: 0,
					totalSpecial: 0,
					totalXuanJing: 0,
				},
				countMonth: {
					recordCount: 0,
					totalCopyUse: 0,
					totalCopyWages: 0,
					totalSpecial: 0,
					totalXuanJing: 0,
				},
				countTotal: {
					recordCount: 0,
					totalCopyUse: 0,
					totalCopyWages: 0,
					totalSpecial: 0,
					totalXuanJing: 0,
				},
			}
		},
		mounted() {
			this.$api.get('/jx3/copyRecord/countWeek', {}).then(res => {
				this.countWeek = res.data
				this.$api.get('/jx3/copyRecord/countMonth', {}).then(res => {
					this.countMonth = res.data
				})
				this.$api.get('/jx3/copyRecord/countTotal', {}).then(res => {
					this.countTotal = res.data
				})
			})
		},
		methods: {
			toCopyRecord() {
				uni.navigateTo({
					url: '/pages/copyRecord/copyRecord'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.card-item {
		margin: 90rpx 30rpx;
		padding: 30rpx;
		border-radius: 6px;
		background-color: #fff;
		position: relative;
		color: #fff;
		font-weight: bold;
		.Identification {
			position: absolute;
			right: 30rpx;
			top: 0;
			transform: translateY(-50%);
			font-weight: bold;
			font-size: 60px;
			color: #fff;
			text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
		}
		.title {
			padding-bottom: 10rpx;
			margin-bottom: 10rpx;
			font-size: 16px;
			border-bottom: 1rpx solid #ffffff77;
		}
		.content-item {
			width: 50%;
		}
	}
	.bg1 {
		background: linear-gradient(to right, #f85997, #eca97a);
	}
	.bg2 {
		background: linear-gradient(to right, #3ba0f7, #6fccf1);
	}
	.bg3 {
		background: linear-gradient(to right, #5b86e8, #e985f1);
	}
	.more-btn {
		padding: 0 30rpx;
	}
</style>

